<template>
  <div class="tab">
    <router-link
      class="tab-item"
      v-for="tab in tabs"
      :key="tab.path"
      :to="tab.path"
    >
      <iconfont :name="tab.icon" bg></iconfont>
    </router-link>
  </div>
</template>

<script>
  export default {
    name: 'tab',
    data() {
      return {
        tabs: [
          {
            icon: 'hanhan-01-01',
            path: '/chat'
          },
          {
            icon: 'haoyou',
            path: '/users'
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>

.tab {
  font-size: $font-size-medium;
  display: flex;
  flex-direction: column;
  &-item {
    height: 60px;
    line-height: 60px;
    cursor: pointer;
    position: relative;
    text-align: center;
    text-decoration: none;
    &.router-link-active {
      .iconfont {
        color: $color-theme;
      }
    }
  }
  &-link {
    color: $color-text-l;
  }
}

</style>
